<template>
  <div class="samplingMessage">
    <form-message>
      <form-message-item :is-long="true">
        <div slot="message">抽样方法：</div>
        <div slot="content">
          <el-row >
            <el-col v-if="isShow.sjcqNum" :span="12">
              <el-checkbox @change="changeState(formInfo.randomSample)">
                <span class="fontSize12">随机抽取</span></el-checkbox>
              <el-input
                v-model="formInfo.randomSample.randomNum"
                placeholder="请输入"
                :disabled="formInfo.randomSample.isCheck"
                :clearable="formInfo.randomSample.clearable"
              />份
            </el-col>
            <el-col v-if="isShow.sjcPer" :span="12">
              <el-checkbox @change="changeState(formInfo.randomSamplePer)"><span class="fontSize12">随机抽取</span></el-checkbox>
              <el-input
                v-model="formInfo.randomSamplePer.randomPer"
                placeholder="请输入"
                :disabled="formInfo.randomSamplePer.isCheck"
                :clearable="formInfo.randomSamplePer.clearable"
              />%
            </el-col>
          </el-row>
        </div>
      </form-message-item>
      <form-message-item :is-long="true">
        <div slot="content">
          <el-row>
            <el-col v-if="isShow.mgksNum" :span="12">
              <el-checkbox @change="changeState(formInfo.departmentSample)"><span class="fontSize12">每个科室</span></el-checkbox>
              <el-input
                v-model="formInfo.departmentSample.departmentNum"
                placeholder="请输入"
                :disabled="formInfo.departmentSample.isCheck"
                :clearable="formInfo.departmentSample.clearable"
              />份
            </el-col>
            <el-col v-if="isShow.mgksPer" :span="12">
              <el-checkbox @change="changeState(formInfo.departmentSamplePer)"><span class="fontSize12">每个科室</span></el-checkbox>
              <el-input
                v-model="formInfo.departmentSamplePer.departmentPer"
                placeholder="请输入"
                :disabled="formInfo.departmentSamplePer.isCheck"
                :clearable="formInfo.departmentSamplePer.clearable"
              />%
            </el-col>
          </el-row>
        </div>
      </form-message-item>
      <form-message-item :is-long="true" v-if="isShow.cfys">
        <div slot="content">
          <el-checkbox @change="changeState(formInfo.doctorSample)" />
          <el-input
            v-model="formInfo.doctorSample.doctorPer"
            placeholder="请输入"
            :disabled="formInfo.doctorSample.isCheck"
            :clearable="formInfo.doctorSample.clearable"
          />
          %处方医生，每位处方医生的
          <el-input
            v-model="formInfo.doctorSample.doctorNum"
            placeholder="请输入"
            :disabled="formInfo.doctorSample.isCheck"
            :clearable="formInfo.doctorSample.clearable"
          />份
        </div>
      </form-message-item>
    </form-message>
  </div>
</template>

<script>
import FormMessage from './FormMessage'
import FormMessageItem from './FormMessageItem'
export default {
  name: 'SamplingMessageVue',
  components: {
    FormMessage,
    FormMessageItem
  },
  props: {
    isPassValue: {
      type: Boolean,
      default: false
    },
    father: {
      type: String,
      default: null
    },
    isShow: {
      sjcqNum: false, sjcPer: false,
      mgksNum: false, mgksPer: false, djgcq: false,
      cfys: true
    }
  },
  data() {
    return {
      formInfo: {
        randomSample: {
          name: 'randomSample',
          isCheck: true,
          randomNum: '',
          clearable: false
        },
        randomSamplePer: {
          name: 'randomSamplePer',
          isCheck: true,
          randomPer: '',
          clearable: false
        },
        departmentSample: {
          name: 'departmentSample',
          isCheck: true,
          departmentNum: '',
          clearable: false
        },
        departmentSamplePer: {
          name: 'departmentSamplePer',
          isCheck: true,
          departmentPer: '',
          clearable: false
        },
        doctorSample: {
          name: 'doctorSample',
          isCheck: true,
          doctorPer: '',
          doctorNum: '',
          clearable: false
        }
      }
    }
  },
  computed: {
  },
  watch: {
    isPassValue() {
      if (this.isPassValue === true) {
        this.$emit('acquireInfo', 'samplingMessageInfo', this.formInfo)
      }
    }
  },
  methods: {
    changeState(value) {
      value.isCheck = !value.isCheck
      value.clearable = !value.isCheck
      switch (value.name) {
        case 'randomSample':
          value.randomNum = ''
          break
        case 'randomSamplePer':
          value.randomPer = ''
          break
        case 'departmentSample':
          value.departmentNum = ''
          break
        case 'departmentSamplePer':
          value.departmentPer = ''
          break
        case 'doctorSample':
          value.doctorPer = ''
          value.doctorNum = ''
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .samplingMessage{
    font-size: 12px;
  }
.el-checkbox{
  margin-right: 5px;
}
  .fontSize12{
    font-size: 12px !important;
  }
.el-input {
  margin-right: 5px;
  width: 100px;
}
  .el-button, .el-input{
    font-size: 12px;
  }
</style>
